FlexGrid

All controls in ASP.NET MVC Edition are optimized for client-side web development.

You can access FlexGrid control on client-side with the help of wijmo.Control.getControl() method. Add the script that accesses the control after the control declaration. Use the control's Id to create its jQuery selector and use the client-side API.

The ICollectionView class is the main data binding class used on client-side. This class enables the collections to have currency, filtering, grouping, and sorting services. This interface also includes the IEditableCollectionView and IPagedCollectionView classes that support editing and paging. See http://wijmo.com/5/docs/topic/wijmo.collections.CollectionView.Class.html for more information.

The following code sample demonstrates how to access a FlexGrid and FlexGrid CollectionView on client-side.

Client-Side Access	Copy Code
@using MVCFlexGrid.Models @using C1.Web.Mvc.Grid @model IEnumerable<Sale> <!--Instantiate FlexGrid and set its properties--> @(Html.C1().FlexGrid<Sale>() .Id("fGrid") .AutoGenerateColumns(false) .Height(450) .Width(700) .AllowAddNew(true) .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Cell) .CssClass("grid") .Bind(Model) // Binding columns data to FlexGrid .Columns(bl => { bl.Add(cb => cb.Binding("ID")); bl.Add(cb => cb.Binding("Start")); bl.Add(cb => cb.Binding("Product")); bl.Add(cb => cb.Binding("Amount").Format("c")); bl.Add(cb => cb.Binding("Discount").Format("p0")); bl.Add(cb => cb.Binding("Active")); }) ) <script> var grid, gridCV; c1.mvc.Utils.documentReady(function () { grid = wijmo.Control.getControl('#fGrid'); gridCV = grid.collectionView; }); </script>

Client-Side Access

Copy Code

@using MVCFlexGrid.Models
@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>

<!--Instantiate FlexGrid and set its properties-->
@(Html.C1().FlexGrid<Sale>()
    .Id("fGrid")
    .AutoGenerateColumns(false)
    .Height(450)
    .Width(700)
    .AllowAddNew(true)
    .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Cell)
    .CssClass("grid")
    .Bind(Model) 
     // Binding columns data to FlexGrid
     .Columns(bl =>
       {
           bl.Add(cb => cb.Binding("ID"));
           bl.Add(cb => cb.Binding("Start"));
           bl.Add(cb => cb.Binding("Product"));
           bl.Add(cb => cb.Binding("Amount").Format("c"));
           bl.Add(cb => cb.Binding("Discount").Format("p0"));
           bl.Add(cb => cb.Binding("Active"));
       })
)
<script>
    var grid, gridCV;
    c1.mvc.Utils.documentReady(function ()
    {
        grid = wijmo.Control.getControl('#fGrid');
        gridCV = grid.collectionView;
    });
</script>

See Wijmo FlexGrid API Documentation for more information.